<template>
<div>
map

<div class="amap-wrapper">
      <el-amap vid="amapDemo"  
        :center="center"
        :zoom="zoom"  
        >

        <el-amap-marker vid="component-marker" :position="componentMarker.position" :content-render="componentMarker.contentRender" ></el-amap-marker>

        </el-amap>
    </div>

</div>
</template>

<script>
import VueAMap from 'vue-amap'


let amapManager = new VueAMap.AMapManager();

// const exampleComponents = 

export default {
	
	name : 'dlqmap',
	
	data () {
		return {
		  	amapManager,
		  	zoom: 12,
          	center: [123.390223, 41.749665],


          	componentMarker: {
			    position: [123.390223, 41.749665],
			 //    contentRender: (h, instance) => h({
				//     props: ['text'],
				//     template: `<div>{{text}}号楼</div>`
				// }, {
			 //        style: {backgroundColor: '#fff'},
			 //        props: {text: '1'}
			 //    }, ['xxxxxxx'])
			    contentRender: (h, instance) => h('span', {
                    style: {backgroundColor: '#fff'},
                },['xxxxx']),



			},
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {

	},

	methods : {

	},

	watch : {
	    
	},

	mounted () {
		this.$http({
			fun : '/v1/pn/cs/list',
			requestType : 'GET',
			cb : res => {
				console.log(res);
				const arr = this.$util.transData(res, 'id', 'pid', 'children');

				console.log(arr);
			}
		});





		const obj = {
			center : [123.364992, 41.830402],
		};

		const str = JSON.stringify(obj);
		console.log(str);


	},

}
</script>

<style scoped>
.amap-wrapper {
  width: 500px;
  height: 500px;
}
</style>
